<template>
    <div class="fault-style">
        <div class="mix"></div>
    </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
.fault-style {
    width: 100%;
    height: 100%;
    .mix {
        position: relative;
        width: 100%;
        height: 100%;

        /* 背景图和背景色混合成蓝色故障 */
        background: url("https://pic1.zhimg.com/50/v2-369298633fbd3c41c81c37940e4bb2ec_720w.webp?source=1def8aca")
            #00ffff;
        background-position: center;
        background-blend-mode: lighten;

        @include flex-center;
        &::before {
            position: absolute;
            inset: 0;
            margin-left: 10px;
            content: "";

            /* 伪元素背景图和背景色混合成红色故障，并且偏移一些 */
            background: url("https://pic1.zhimg.com/50/v2-369298633fbd3c41c81c37940e4bb2ec_720w.webp?source=1def8aca")
                #ff0000;
            background-position: center;
            background-blend-mode: lighten;

            /* 红蓝已经单独和背景图混合好了，然后将红色故障和蓝色故障一起混合，形成故障风 */
            mix-blend-mode: darken;

            /* 加点故障抖动动画 */
            animation: shake 30ms infinite;

            @keyframes shake {
                50% {
                    transform: translateX(5px);
                }
            }
        }
    }
}
</style>
